<template>
  <div style="height: 100%">
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-container>
        <el-main>
          <div style="padding: 0 0 0 20px">
            <el-input
              style="width: 250px"
              suffix-icon="el-icon-position"
              placeholder="请输入交警编号搜索"
              v-model="policeId"
            ></el-input
            >&nbsp;&nbsp;&nbsp;&nbsp;
            <el-input
              style="width: 250px"
              suffix-icon="el-icon-search"
              placeholder="请输入交警姓名搜索"
              v-model="userName"
            ></el-input>
            <el-button style="margin-left: 5px" type="primary" @click="load"
              >搜索</el-button
            >
            <el-button style="margin-left: 5px" type="warning" @click="reset"
              >重置</el-button
            >
            <span>
              <Header />
            </span>
          </div>
          <div style="margin: 10px">
            <!-- <el-button type="primary" @click="handleAdd"
              >新增<i class="el-icon-circle-plus"></i
            ></el-button> -->
            <el-button type="danger" @click="delBatch"
              >批量清除<i class="el-icon-remove"></i
            ></el-button>
            <!-- <el-button type="primary"
              >导入<i class="el-icon-bottom"></i
            ></el-button>
            <el-button type="primary"
              >导出<i class="el-icon-top"></i
            ></el-button> -->
          </div>
          <el-table :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="35"></el-table-column>
            <el-table-column fixed prop="id" label="ID" align="center" />
            <!-- 不显示eid,但是传递到后台 -->
            <!-- <el-table-column
              fixed
              prop="userId"
              label="用户ID"
              align="center"
            /> -->
            <el-table-column
              fixed
              prop="policeId"
              label="交警编号"
              align="center"
            />
            <el-table-column
              fixed
              prop="userName"
              label="交警姓名"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="gender"
              label="性别"
              width="50"
              align="center"
            />
            <el-table-column
              prop="policeRank"
              label="职务"
              width="160"
              align="center"
            />
            <el-table-column
              prop="dutyStation"
              label="执勤地点"
              align="center"
            />
            <el-table-column
              prop="department"
              label="交警所属单位"
              width="120"
              align="center"
            />
            <el-table-column
              prop="policeProvince"
              label="省份"
              align="center"
            />

            <el-table-column prop="policeCity" label="城市" align="center" />

            <el-table-column prop="isActive" label="状态" align="center">
              <template v-slot:default="scope">
                <span v-if="scope.row.isActive === 1">在职</span>
                <span v-else-if="scope.row.isActive === 0">离职</span>
                <!-- 这里可以省略 v-else，因为它默认不显示任何内容 -->
              </template>
            </el-table-column>
            <el-table-column
              prop="phoneNumber"
              label="联系电话"
              align="center"
            />
            <el-table-column
              prop="emergencyContactName"
              label="紧急联系人"
              width="120"
              align="center"
            />

            <el-table-column
              prop="emergencyContactPhone"
              label="紧急联系人电话"
              width="120"
              align="center"
            />

            <el-table-column
              prop="homeAddress"
              label="家庭住址"
              width="120"
              align="center"
            />
            <el-table-column
              prop="revisionTime"
              label="更新时间"
              align="center"
              width="180"
            />
            <el-table-column prop="reviser" label="更新人" align="center" />
            <el-table-column
              prop="createTime"
              label="创建时间"
              align="center"
              width="180"
            />
            <el-table-column prop="createBy" label="创建人" align="center" />

            <el-table-column fixed="right" label="操作" width="360">
              <template slot-scope="scope">
                <el-button
                  type="info"
                  size="middle"
                  icon="el-icon-view"
                  @click="handleView(scope.row)"
                  >详情</el-button
                >

                <el-button
                  type="success"
                  size="middle"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.row)"
                  >编辑</el-button
                >
                <el-popconfirm
                  style="margin-left: 5px"
                  confirm-button-text="确定"
                  cancel-button-text="再想想"
                  icon="el-icon-info"
                  icon-color="red"
                  title="您确定清除吗？"
                  @confirm="handleDelete(scope.row.id)"
                >
                  <el-button
                    type="danger"
                    size="middle"
                    slot="reference"
                    icon="el-icon-delete"
                    >清除</el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
            <!-- <el-table-column fixed="right" label="完善交警信息" width="340">
              <template slot-scope="scope">
                <el-button
                  type="info"
                  size="middle"
                  icon="el-icon-view"
                  @click="view(scope.row)"
                  >更多</el-button
                >
                <el-popconfirm
                  style="margin-left: 5px"
                  confirm-button-text="确定"
                  cancel-button-text="再想想"
                  icon="el-icon-info"
                  icon-color="red"
                  title="您确定删除吗？"
                  @confirm="handleDelete(scope.row.id)"
                >
                  <el-button
                    type="danger"
                    size="middle"
                    slot="reference"
                    icon="el-icon-delete"
                    >删除</el-button
                  >
                </el-popconfirm>
                <el-button
                  type="success"
                  size="middle"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.row)"
                  >更新</el-button
                >
              </template>
            </el-table-column> -->
          </el-table>
          <div style="padding: 10px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
          <el-dialog
            title="交警信息"
            :visible.sync="dialogFormVisible"
            width="30%"
          >
            <el-form label-width="80px" size="small">
              <el-form-item label="ID">
                <el-input
                  type="hidden"
                  v-model="form.id"
                  placeholder=""
                  autocomplete="off"
                  :disabled="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="交警姓名">
                <el-input
                  v-model="form.userName"
                  placeholder="交警姓名"
                  autocomplete="off"
                  :disabled="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="交警编号">
                <el-input
                  v-model="form.policeId"
                  placeholder="默认账号为交警编号"
                  autocomplete="off"
                  :disabled="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-select
                  v-model="form.gender"
                  placeholder="请选择性别"
                  autocomplete="off"
                >
                  <el-option label="男" value="男"></el-option>
                  <el-option label="女" value="女"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="职务">
                <el-input
                  v-model="form.policeRank"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="所属单位">
                <el-input
                  v-model="form.department"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="执勤地点">
                <el-input
                  v-model="form.dutyStation"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input
                  v-model="form.phoneNumber"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="家庭地址">
                <el-input
                  v-model="form.homeAddress"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="紧急联系人姓名">
                <el-input
                  v-model="form.emergencyContactName"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="紧急联系人电话">
                <el-input
                  v-model="form.emergencyContactPhone"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="form.isActive" autocomplete="on">
                  <el-option label="在职" value="1"></el-option>
                  <el-option label="离职" value="0"></el-option>
                </el-select>
              </el-form-item>
              <input type="hidden" v-model="hiddenValue" value="2" />
              <el-form-item label="省份">
                <el-input
                  v-model="form.policeProvince"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item label="城市">
                <el-input
                  v-model="form.policeCity"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <input type="hidden" v-model="form.userId" />
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveUser">确 定</el-button>
            </div>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Aside from "@/components/Aside.vue";
import Header from "@/components/Header.vue";
import { UserextSave,UserextUpdate,UserextPage,UserextDelete,UserextDelBatch } from "@/api/api";

export default {
  name: "HomeView",
  components: {
    Aside,
    Header,
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 5,
      userName: "",
      policeId: "",
      id: null,
      userId: null,
      hiddenValue: "1",
      isActive: "",
      dialogFormVisible: false,
      form: {},
    };
  },
  created() {
    //请求分页查询数据
    this.load();
  },
  methods: {
    edit(row) {
      console.log(row);
    },
    handleSizeChange(val) {
      /*传递过来当前是第几页*/
      console.log(`每页 ${val} 条`);
      this.pageSize = val; //获取当前每页显示条数
      this.load();
    },
    handleCurrentChange(val) {
      /*传递过来当前是第几页*/
      console.log(`当前页: ${val}`);
      this.pageNum = val; //获取当前第几页
      this.load();
    },
    handleAdd() {
      this.dialogFormVisible = true;
      this.form = {}; //如果之前有填过值，可以置空
    },
    handleEdit(row) {
      console.log(row);
      this.form = row; //把当前行的数据赋值给form
      this.dialogFormVisible = true;
      this.hiddenValue = 1; //编辑flag
    },
    handleView(row) {
      console.log(row);
      this.form = row; //把当前行的数据赋值给form
      this.dialogFormVisible = true;
    },

    async handleDelete(id) {
      if (id !== null) {
        const resp = await UserextDelete(id);
        if (Number(resp.code) === 200) this.$message.success(resp.msg);
        else this.$message.error(resp.msg);
        this.load();
      } else this.$message.success("交警用户信息为空,无需重复清除.");
    },

    async saveUser() {
      if (this.hiddenValue === 1) {
        const resp = await UserextSave(this.form);
        if (Number(resp.code) === 200) {
          this.$message.success(resp.msg);
          this.dialogFormVisible = false;
          this.load();
        } else {
          this.$message.error(resp.msg);
        }
      } else {
        const resp = await UserextUpdate(this.form);
        if (resp.code === 0) this.$message.success(resp.data);
        else this.$message.error(resp.data);
        this.dialogFormVisible = false;
        this.load();
      }
    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    async delBatch() {
      let ids = this.multipleSelection.map((v) => v.id); //map这个方法可以实现将multipleSelection中的对象扁平化处理。
      let allNotNull = ids.every((id) => id !== null);
      if (allNotNull) {
        const res = await UserextDelBatch(ids);
        if (Number(res) === 200) {
          this.$message.success(res.msg);
          this.load();
        } else {
          this.$message.error(res.msg);
        }
      } else this.$message.success("交警用户信息为空,无需重复清理!");
    },
    reset() {
      this.userName = "";
      this.policeId = "";
      this.total = "0";
      this.pageNum = "1";
      this.pageSize = "5";
      this.load();
    },

    //将请求数据封装为一个方法
    async load() {
      const resp = await UserextPage(this.pageNum, this.pageSize, this.userName, this.policeId);
      this.tableData = resp.pagedata;
      this.total = resp.total;
      this.request
        .get(
          "http://localhost:8084/userext/page?pageNum=" +
            this.pageNum +
            "&pageSize=" +
            this.pageSize +
            "&userName=" +
            this.userName +
            "&policeId=" +
            this.policeId +
            ""
        )
        .then((userpage) => {
          console.log(userpage);
          
        });

      // //请求分页查询数据
      //   fetch("http://localhost:8084/user/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"").then(res=>res.json()).then(res=>{
      //   console.log(res)
      //   this.tableData=res.pagedata
      //   this.total=res.total
      //   })
    },
  },
};
</script>
<style>
.el-main {
  text-align: left;
}
</style>
